<template>
  <div :style="{height: '100%'}">
    <a-layout :style="{height: '100%'}" v-if="!store.state.globalStore.full_screen">
      <a-layout-header class="header">
        <div class="logo">
          <menu_logo/>
        </div>

        <!--        <div :style="{color:'white'}">-->
        <!--            焊联工业互联网大数据监管平台-->
        <!--        </div>-->

        <!--        <a-menu-->
        <!--            theme="dark"-->
        <!--            mode="horizontal"-->
        <!--            v-model:selectedKeys="selectedKeys1"-->
        <!--            :style="{ lineHeight: '64px' }"-->
        <!--        >-->
        <!--          <a-menu-item key="1">nav 1</a-menu-item>-->
        <!--          <a-menu-item key="2">nav 2</a-menu-item>-->
        <!--          <a-menu-item key="3">nav 3</a-menu-item>-->
        <!--        </a-menu>-->
        <user_logo/>
      </a-layout-header>
      <a-layout>
        <a-layout-sider width="200" style="background: #fff">
          <a-menu
              mode="inline"
              :defaultSelectedKeys="[$route.path]"
              v-model:openKeys="menu_data.keys"
              :inline-collapsed="menu_data.collapsed"
              :style="{ height: '100%', borderRight: 0 }"
              theme="dark"
              @openChange="onOpenChange"
          >
            <template v-for="(item,index) in menu_list" :key="index">
              <a-sub-menu :key="item.path" v-if="item.children.length > 0 && item.show">
                <template #title>
              <span>
                <laptop-outlined/>
                {{ item.title }}
              </span>
                </template>
                <template v-for="(sun,i) in item.children">
                  <a-menu-item
                      :key="'/index/'+item.path+'/'+sun.path" v-if="sun.show">
                    <router-link :to="'/index/'+item.path+'/'+sun.path">{{ sun.title }}</router-link>
                  </a-menu-item>
                </template>

              </a-sub-menu>
              <!--              <template v-if="item.show">-->
              <a-menu-item :key="'/index/'+item.path" v-else>
                <router-link :to="'/index/'+item.path">
                  <a-icon type="video-camera"/>
                  <span>{{ item.title }}</span>
                </router-link>
              </a-menu-item>
            </template>
            <!--            </template>-->


            <!--            <a-sub-menu key="statisticalReport">-->
            <!--              <template #title>-->
            <!--              <span>-->
            <!--                <laptop-outlined/>-->
            <!--                统计报表-->
            <!--              </span>-->
            <!--              </template>-->
            <!--              <a-menu-item key="/index/statistics/device_statistics_day">-->
            <!--                <router-link to="/index/statistics/device_statistics_day">设备运行情况报表</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/statistics/quality_traceability">-->
            <!--                <router-link to="/index/statistics/quality_traceability">质量溯源焊接记录表</router-link>-->
            <!--              </a-menu-item>-->
            <!--            </a-sub-menu>-->
            <!--            <a-sub-menu key="deviceManagement">-->
            <!--              <template #title>-->
            <!--              <span>-->
            <!--                <user-outlined/>-->
            <!--                设备管理-->
            <!--              </span>-->
            <!--              </template>-->
            <!--              <a-menu-item key="/index/device/EquipmentPersonnel">-->
            <!--                <router-link to="/index/device/EquipmentPersonnel">设备基本信息</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/device/essential">-->
            <!--                <router-link to="/index/device/essential">设备人员设置</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/device/WorkpieceInformation">-->
            <!--                <router-link to="/index/device/WorkpieceInformation">工件信息设置</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/device/task_distribution">-->
            <!--                <router-link to="/index/device/task_distribution">任务派发</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/device/work_order_record">-->
            <!--                <router-link to="/index/device/work_order_record">工单记录</router-link>-->
            <!--              </a-menu-item>-->
            <!--            </a-sub-menu>-->
            <!--            <a-sub-menu key="cockpit">-->
            <!--              <template #title>-->
            <!--              <span>-->
            <!--                <notification-outlined/>-->
            <!--                驾驶舱&nbsp;&nbsp;&nbsp;-->
            <!--              </span>-->
            <!--              </template>-->
            <!--              <a-menu-item key="/index/cockpit/data_analysis">-->
            <!--                <router-link :to="get_url()">设备大数据分析</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/cockpit/run_list">-->
            <!--                <router-link to="/index/cockpit/run_list">设备运行列表</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/cockpit/map_home">-->
            <!--                <router-link to="/index/cockpit/map_home">企业级地图</router-link>-->
            <!--              </a-menu-item>-->
            <!--              &lt;!&ndash;              map_home&ndash;&gt;-->
            <!--            </a-sub-menu>-->
            <!--            <a-sub-menu key="systemManagement">-->
            <!--              <template #title>-->
            <!--              <span>-->
            <!--                <laptop-outlined/>-->
            <!--                系统管理-->
            <!--              </span>-->
            <!--              </template>-->
            <!--              <a-menu-item key="/index/system/user">-->
            <!--                <router-link to="/index/system/user">用户管理</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/system/role">-->
            <!--                <router-link to="/index/system/role">角色管理</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/system/team">-->
            <!--                <router-link to="/index/system/team">班组管理</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/system/data">-->
            <!--                <router-link to="/index/system/data">字典数据设置</router-link>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item key="/index/system/type">-->
            <!--                <router-link to="/index/system/type">字典类型设置</router-link>-->
            <!--              </a-menu-item>-->

            <!--            </a-sub-menu>-->
            <!--            <a-sub-menu key="test">-->
            <!--              <template #title>-->
            <!--              <span>-->
            <!--                <laptop-outlined/>-->
            <!--                单元测试-->
            <!--              </span>-->
            <!--              </template>-->
            <!--              <a-menu-item key="/index/test/js_excel">-->
            <!--                <router-link to="/index/test/js_excel">js_excel</router-link>-->
            <!--              </a-menu-item>-->
            <!--            </a-sub-menu>-->
          </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb class="breadcrumb">
            <a-breadcrumb-item>{{menu_data.parent_name?menu_data.parent_name:'焊联工业互联网大数据平台'}}</a-breadcrumb-item>
            <!--            <a-breadcrumb-item>List</a-breadcrumb-item>-->
            <a-breadcrumb-item>{{ menu_data.name }}</a-breadcrumb-item>
          </a-breadcrumb>
          <a-layout-content
              :style="{ background: '#fff', padding: '0px', margin: 0, minHeight: '280px' }"
          >
            <transition>
              <router-view/>
            </transition>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
    <router-view v-if="store.state.globalStore.full_screen"/>
  </div>
</template>
<script>
import {UserOutlined, LaptopOutlined, NotificationOutlined} from '@ant-design/icons-vue';
import {defineComponent, ref, reactive, watch} from 'vue';
import user_logo from "@/components/logo/user"
import {useStore} from "vuex"
import menu_logo from "@/components/logo/menu_logo";
import {useRoute, useRouter, onBeforeRouteUpdate} from "vue-router";
import Template from "@/views/statistics/template";

export default defineComponent({
  components: {
    Template,
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined,
    user_logo,
    menu_logo
  },

  setup() {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const selectedKeys1 = ref(['2']);
    const collapsed = ref(false);
    const menu_data = reactive(
        {
          keys: ['systemManagement'],
          selectedKey: ['/index/user'],
          collapsed: false,
          name: ""
        }
    );
    const rootSubmenuKeys = ['statisticalReport', 'deviceManagement', 'cockpit', 'systemManagement', 'test'];
    try {
      menu_data.keys = [JSON.parse(window.sessionStorage.getItem("openKeys"))[1]]
    } catch (e) {
      console.log(e)
    }
    //获取路由
    const routes = router.options.routes

    // 菜单的所有列表
    const menu_list = ref(routes[1].children)
    //菜单
    const onOpenChange = (keys) => {
      let key = ""
      // 将当前打开的父级菜单存入缓存中
      if (keys.length > 1) {
        key = keys[1]
      } else {
        key = keys[0]
      }
      const rowValue = menu_data.keys
      window.sessionStorage.setItem('openKeys', JSON.stringify(keys))
      //  控制只打开一个
      const latestOpenKey = keys.find(key => rowValue.indexOf(key) === -1);
      if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        menu_data.keys = [key];
      } else {
        menu_data.keys = latestOpenKey ? [latestOpenKey] : [];
      }
    };
    const get_url = () => {
      return "/index/cockpit/data_analysis?time=" + new Date()
    }

    // watch(route, (newValue, old) => {
    //   console.log("路由监听", newValue)
    // })

    onBeforeRouteUpdate((to) => {
      console.log(to, "=====");
      // next();
      menu_data.name = to.name
      try {
        menu_data.parent_name = to.matched[1].name
      }catch (e) {
        menu_data.parent_name = "焊联工业互联网大数据平台"
      }

    });

    return {
      selectedKeys1,
      collapsed,
      menu_data,
      //状态管理
      store,
      onOpenChange,
      get_url,
      menu_list
    };
  },
});
</script>
<style>
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.breadcrumb {
  display: flex;
  justify-content: flex-start;
  height: 40px;
  align-items: center;
}

.site-layout-background {
  background: #fff;
}
</style>
